<template>
  <view class="container">
    <s-layout :title="$t('order.list2.title')">
      <scroll-view
        class="scroll-view"
        scroll-y="true"
        @scroll="scrollTop"
        @scrolltolower="loadMore"
      >
        <view class="list_table" v-for="(item, index) in orderList" :key="index">
          <view class="left">
            <view class="orderby">{{ index + 1 }}</view>
            <image style="margin: 0 20rpx" :src="item.items[0].picUrl" mode=""></image>
            <view class="detil">
              <view class="goodsName">{{ item.items[0].spuName }}</view>
              <view class="createTime">{{ formatDate(item.createTime) }}</view>
              <view class="printStatus">{{ getPrintStatusEnum(item.printStatus) }}</view>
            </view>
          </view>
          <view class="right" style="text-align: right">
            <!--          <text>{{ $t('order.list.queueing') }}</text>-->
            <text>￥{{ item.payPrice / 100 }}</text>
            <button
              class="ss-reset-button apply-btn"
              v-if="[10, 20].includes(item.status) && item.items[0].afterSaleStatus === 0"
              @tap.stop="
                sheep.$router.go('/pages/order/aftersale/apply', {
                  orderId: item.id,
                  itemId: item.items[0].id,
                })
              "
            >
              {{ $t('order.list.applyAftersale') }}
            </button>
          </view>
        </view>
      </scroll-view>
      <uni-popup ref="alertDialog" type="dialog">
        <uni-popup-dialog
          type="error"
          :cancelText="$t('common.cancel')"
          :confirmText="$t('common.confirm')"
          :title="$t('order.list.refund')"
          :content="$t('order.list.confirmRefund')"
          @confirm="refund"
          @close="dialogClose"
        ></uni-popup-dialog>
      </uni-popup>
    </s-layout>
  </view>
</template>

<script setup>
  import { ref, nextTick } from 'vue';
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
  import MessageApi from '@/sheep/api/print/message';
  import OrderApi from '@/sheep/api/trade/order';
  import { getPayStatusEnum, getPrintStatusEnum, getPaymentMethodsEnum } from '@/sheep/util/const';
  import sheep from '@/sheep';
  import { resetPagination } from '@/sheep/util';
  import { useI18n } from 'vue-i18n';

  const { t } = useI18n();
  //列表数据
  const orderList = ref([]);
  //列表总数
  const orderTotal = ref(0);
  //请求参数
  const isPopupShow = ref(false);
  const param = ref({
    pageNo: 1,
    pageSize: 10,
  });
  let orderObj = {};
  const alertDialog = ref(null);
  OrderApi.getOrderPage(param.value).then((res) => {
    orderList.value = res.data.list;
    orderTotal.value = res.data.total;
  });
  const dialogClose = () => {
    console.log(t('order.list.clickClose'));
  };
  const refund = () => {
    MessageApi.afterSaleRefund({ id: orderObj.id }).then((res) => {
      console.log(res);
    });
  };
  const openDialog = (obj) => {
    orderObj = obj;
    console.log(alertDialog.value);
    alertDialog.value.open();
    // isPopupShow.value = true
  };
  /**
   * 格式化时间
   * @param date
   * @returns {string}
   */
  const formatDate = (date) => {
    return sheep.$helper.timeFormat(date, 'yyyy-mm-dd hh:MM:ss');
  };
  const scrollTop = () => {};
  const loadMore = () => {
    if (Math.ceil(orderTotal.value / param.value.pageSize) > param.value.pageNo) {
      param.value.pageNo++;
      OrderApi.getOrderPage(param.value).then((res) => {
        orderList.value = [...orderList.value, ...res.data.list];
        orderTotal.value = res.data.total;
      });
    }
  };

  // 上拉加载更多
  onReachBottom(() => {
    loadMore();
  });

  // 下拉刷新
  onPullDownRefresh(() => {
    param.pageNo = 1;
    param.pageSize = 10;
    orderList.value = [];
    orderTotal.value = 0;
    loadMore();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  });
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
    background-color: #ffc501;
    .scroll-view {
      height: 100%;
      width: 100%;
      .list_table {
        width: 100%;
        height: 100px;
        box-sizing: border-box;
        padding: 15px 10px;
        //margin: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        //background-color:#ffd133;
        // opacity: 1;
        color: #fff;
        .left {
          display: flex;
          justify-content: flex-start;
          image {
            width: 50px;
            height: 50px;
          }
          .detil {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            .printStatus {
              margin-top: 10rpx;
              display: inline-block;
              background: #4c4c4c;
              padding: 4rpx 12rpx;
              border-radius: 10px;
              font-size: 26rpx;
            }
            .createTime {
              margin-top: 10rpx;
              font-size: 24rpx;
            }
            .goodsName {
              font-size: 30rpx;
            }
          }
        }
      }
    }
  }
  .list_table:nth-child(even) {
  }
  .list_table:nth-child(odd) {
    background-color: #ffd133;
  }
</style>
